---
interface Clip {
  text: string
  url: string
}

interface BoxerClipProps {
  clips?: Clip[]
}

const { clips = [] } = Astro.props as BoxerClipProps
---

<ul class="text-theme-raisin-black flex w-full flex-col gap-4 text-4xl">
  {
    clips.map((clip) => (
      <li>
        <a
          href={clip.url}
          target="_blank"
          rel="noopener noreferrer"
          class="bg-theme-raisin-black/40 hover:bg-theme-raisin-black/60 flex items-center justify-between space-y-6 rounded-xl p-4 text-white backdrop-blur-sm transition"
        >
          {clip.text}
        </a>
      </li>
    ))
  }
</ul>
